{% stylesheet %}
.block_comment_image .block_comment_list li {
  list-style-type: none;
  background-color: #F6F6F6;
}

.block_comment_image .block_comment_list li .block_comment_list_star {
  position: absolute;
  left: 50%;
  top: -12px;
  transform: translateX(-50%);
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.16);
  height: 24px;
  display: flex;
  align-items: center;
  padding: 0 12px;
}

.block_comment_image .block_comment_list li .block_comment_list_content {
  margin-bottom: 10px;
  overflow: hidden;
  color: var(--detail_color);
  text-align: left;
}

.block_comment_image .block_comment_list li .block_comment_list_author {
  margin-bottom: 10px;
  font-weight: bold;
  display: flex;
  align-items: center;
  color: var(--title_color);
  overflow: hidden;
}

.block_comment_image .block_comment_list li .block_comment_list_author img {
  max-width: 20px;
  max-height: 20px;
  margin-right: 10px;
}

.block_comment_image .block_comment_list li .block_comment_list_author span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.block_comment_image .block_comment_list li .block_comment_list_img img {
  max-width: 100%;
  width: 100%;
  display: block;
}

.block_comment_image .block_comment_list_star svg + svg {
  margin-left: 4px;
}

.block_comment_image .block_comment_li .block_comment_product {
  padding: 20px;
  border-top: 1px solid #dddddd;
}

.block_comment_image .block_comment_list li .block_comment_product a {
  display: flex;
  align-items: center;
}

.block_comment_image .block_comment_list li .block_comment_product a .pic {
  width: 50px;
  height: 50px;
  display: block;
  overflow: hidden;
  object-fit: cover;
}

.block_comment_image .block_comment_list li .block_comment_product a img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.block_comment_line-clamp-2{
  box-sizing: border-box;
  overflow: hidden;
  word-wrap: break-word;
  word-break: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.block_comment_image .block_comment_list li .block_comment_product a .name {
  display: block;
  width: calc(100% - 50px);
  padding-left: 10px;
  box-sizing: border-box;
  overflow: hidden;
  word-wrap: break-word;
  word-break: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  color: var(--detail_color);
}

.block_comment_image .block_comment_list li .block_comment_list_time {
  color: var(--detail_color);
}

.block_comment_image .block_comment_li .block_comment-content {
  padding: 30px 20px 20px;
  position: relative;
}

@media (max-width: 767px) {
  .block_comment_image .block_comment_li .block_comment-content {
    padding: 20px 10px 10px;
    position: relative;
  }
  .block_comment_image .block_comment_li .block_comment_product {
    padding: 10px;
  }
  .block_comment_image .block_comment_list li .block_comment_product a .pic {
    width: 40px;
    height: 40px;
  }
  .block_comment_image .block_comment_list_star svg {
    width: 14px;
    height: 14px;
  }
  .block_comment_image .block_comment_list_star svg + svg {
    margin-left: 2px;
  }
  .mo-waterfall-warp .mo-waterfall-column {
    grid-row-gap: 15px;
  }
}

{% endstylesheet %}
{% if theme_preview == '1' or  storeConfig.comments_status == '1' %}
{% assign score_uncheck_color = theme_config.global.product_score_uncheck_color | default:'#bbbbbb' %}
{% assign score_selected_color = theme_config.global.product_score_selected_color | default:'#F8AD6B' %}
{% assign defaultImageLoading = 'empty_loading.png' | public_asset_abs_url %}

<div class="block_comment_image" id="block_comment_image_{{block_id}}">
    <div class="{% if section.settings.is_width_fill %}full_container_wrapper{% else %}container_wrapper{% endif %}">
        {% include 'block_title', title:section.settings.title , detail:section.settings.detail %}
        <div class="block_comment_list" >
            <ul id="block_comment_list_{{block_id}}">
                
            </ul>
        </div>
    </div>
</div>
<script type="text/javascript">
    $(function(){
        const waterfall = new waterfalls({
            id: "#block_comment_list_{{block_id}}",
            bottomDistance: 50,
            scrollBottom: scrollBottom,
            resizeConfig: [{
                    min:0,
                    max: 767,
                    rowGutter: '15px',
                    columnsGutter: '15px',
                    columns: {{ section.settings.mobile_web_column }}
                },
                {
                    min: 768,
                    max: 1199,
                    rowGutter: '30px',
                    columnsGutter: '30px',
                    columns: 3
                },
                {
                    min: 1200,
                    rowGutter: '30px',
                    columnsGutter: '30px',
                    columns: {{ section.settings.web_column }}
                }
            ],
            renderComplete(node){
                {% comment %} window.addLazyImages && addLazyImages(node.find("img[data-src]")); {% endcomment %}
            },
            render(item) {

                var imageBox = '';
                var star = '';
                var flagImg = '';
                var date = '';
                const empty = " {{ 'empty.png' | public_asset_abs_url }}";

                
                if(item.is_image == "1" && item.images.src.length){
                    //<img data-src="'+item.images.src[0]+'" src="{{ 'empty.png' | public_asset_abs_url }}">
                    imageBox = '<div class="block_comment_list_img"><a href="'+item.url+'" ><img data-src="'+item.images.src[0]+'" src="{{ defaultImageLoading }}"></a></div>';
                }else{
                    imageBox = '';
                }

                if(item.flag){
                    flagImg = `<img src="${item.flag}" alt="${item.alt || item.title}" />`;
                }

                if(item.created_at){
                    date = `<div class="block_comment_list_time block_comment_size">${ moi.formatZoneDate(item.created_at,"YYYY-mm-dd")}</div>`;
                }

                for(var j=0; j < 5;j++){
                    if(j < item.star){
                        star += '{% include icon_block_star , width:"16",height:"16",color: score_selected_color  %}';
                    }else{
                        star += '{% include icon_block_star , width:"16",height:"16",color: score_uncheck_color  %}';
                    }   
                }
                var data_from = '{{data_from}}';
                //<img data-src="${item.src}" src="{{ 'empty.png' | public_asset_abs_url }}">
                return `
                    <li class="block_comment_li">
                        ${imageBox}
                        <div class="block_comment-content">
                        <div class="block_comment_list_star">${star}</div>
                        <div class="block_comment_list_author">${flagImg}<span>${item.customer_name}</span></div>
                        <div class="block_comment_list_content block_comment_size {% if section.settings.comment_title_style == 'hide' %}block_comment_line-clamp-2{% endif %}">${item.content}</div>
                        ${date}
                        </div>
                        <div class="block_comment_product"><a href="/products/${item.handle}?data_from=${data_from}"><img class="pic" data-src="${item.src}" src="{{ 'empty.png' | public_asset_abs_url }}"/><span class="name block_comment_size">${item.title}</span></a></div>
                    </li>
                `;
            }
        })


        let page = 1;
        let isAll = true;
        let isScrollLoad = false;
        let [maxRequestNumber,loaddingColumn,webColumn,loaddingNum] = getParams()
        
        function getCollection() {
            waterfall.showLoad()
            if (maxRequestNumber) {
                maxRequestNumber--
            }
            moi.ajax({
                url:"/comments",
                type:"get",
                data:{
                    page: page,
                    pagesize: loaddingNum,
                    is_image: 1,
                    created_at:"{{ section.settings.time }}",
                    star:{{ section.settings.level }}
                },
                success: function(ret) {
                    if (!ret.code) {
                        isScrollLoad = false;
                        waterfall.hideLoad()
                        if(!ret.data.comment.length){
                             waterfall.RenderDefaultData({
                                is_image:1,
                                images: {src: ["{{ 'empty.png' | public_asset_abs_url }}"]},
                                star: 5,
                                url: 'javascript:;',
                                flag: "{{ 'empty.png' | public_asset_abs_url }}",
                                customer_name:"Customer Name",
                                updated_at: "2021-12-03T14:25:06+08:00",
                                content: "content",
                                p_handle:"",
                                title:"title",
                                src:"{{ 'empty.png' | public_asset_abs_url }}"
                            }, '{{ section.settings.button_text }}')
                            return
                        }


                        waterfall.addStorage(ret.data.comment)
                        isAll = ret.data.paginate.pageTotal === page ? true : false;
                        if (!maxRequestNumber || isAll) {
                            waterfall.showMore("{{ section.settings.button_text }}", '/comments')
                        }

                    }
                }
            })
        }

        function getParams() {
          if(moi.isMobile()) {
            return [{{ section.settings.mobile_loadding }},{{ section.settings.mobile_loadding_column }},{{ section.settings.mobile_web_column }},parseInt({{ section.settings.mobile_loadding_column }}) * parseInt({{ section.settings.mobile_web_column }})]
          }else {
            return [{{ section.settings.loadding }},{{ section.settings.loadding_column }},{{ section.settings.web_column }},parseInt({{ section.settings.loadding_column }}) * parseInt({{ section.settings.web_column }})]
          }
        }

        function scrollBottom() {
            if (!isScrollLoad && !isAll  && maxRequestNumber) {
              isScrollLoad = true;
              page++;
              getCollection();
            }
        }
        if(maxRequestNumber > 0){
          getCollection();
        }
    })
   
</script> 
{% endif %}


{% schema %}
{
	"name": {
		"zh_CN": "晒图评论",
		"en_US": "Image comments"
	},
	"tag": "default",
	"class": "block_comment_image",
	"is_global": false,
	"settings": [
		{
			"type": "card_header",
			"label": {
				"zh_CN": "设置",
				"en_US": "Settings"
			}
		},
		{
			"type": "card_switch",
			"label": {
				"zh_CN": "宽度铺满",
				"en_US": "Spread the width"
			},
			"id": "is_width_fill"
		},
		{
			"type": "card_input",
			"id": "title",
			"label": {
				"zh_CN": "标题",
				"en_US": "Title"
			},
			"placeholder": {
				"zh-CN": "请输入标题"
			}
		},
		{
			"type": "card_text_editor",
			"id": "detail",
			"label": {
				"zh_CN": "简短描述",
				"en_US": "Short description"
			},
			"placeholder": {
				"zh-CN": "请输入描述"
			}
		},
		{
			"type": "card_slider",
			"id": "web_column",
			"max": "6",
			"min": "3",
			"label": {
				"zh_CN": "pc每排数量",
				"en_US": "PC number per row"
			}
		},
		{
			"type": "card_slider",
			"id": "loadding",
			"max": "10",
			"min": "0",
			"label": {
				"zh_CN": "pc加载次数",
				"en_US": "PC number of loads"
			}
		},
		{
			"type": "card_slider",
			"id": "loadding_column",
			"max": "3",
			"min": "1",
			"label": {
				"zh_CN": "pc每次加载排数",
				"en_US": "PC number of rows per load"
			}
		},
    {
			"type": "card_slider",
			"id": "mobile_web_column",
			"max": "3",
			"min": "1",
			"label": {
				"zh_CN": "移动端每排数量",
				"en_US": "Mobile number of rows per load"
			}
		},
		{
			"type": "card_slider",
			"id": "mobile_loadding",
			"max": "10",
			"min": "0",
			"label": {
				"zh_CN": "移动端加载次数",
				"en_US": "Mobile number of loads"
			}
		},
		{
			"type": "card_slider",
			"id": "mobile_loadding_column",
			"max": "3",
			"min": "1",
			"label": {
				"zh_CN": "移动端每次加载排数",
				"en_US": "Mobile number of rows per load"
			}
		},
		{
			"type": "card_select",
			"id": "time",
			"label": {
				"zh_CN": "评论时间",
				"en_US": "Comment time"
			},
			"option": [
				{
					"label": {
						"zh_CN": "最新评论",
						"en_US": "Latest Comments"
					},
					"value": "desc"
				},
				{
					"label": {
						"zh_CN": "最早评论",
						"en_US": "First comment"
					},
					"value": "asc"
				}
			],
			"default": "asc"
		},
		{
			"type": "card_select",
			"id": "level",
			"label": {
				"zh_CN": "评论星级",
				"en_US": "Review stars"
			},
			"option": [
				{
					"label": {
						"zh_CN": "五星",
						"en_US": "Five stars"
					},
					"value": "5"
				},
				{
					"label": {
						"zh_CN": "四星及以上",
						"en_US": "Four stars and above"
					},
					"value": "4"
				},
				{
					"label": {
						"zh_CN": "三星及以上",
						"en_US": "Three stars and above"
					},
					"value": "3"
				},
				{
					"label": {
						"zh_CN": "二星及以上",
						"en_US": "Two stars or above"
					},
					"value": "2"
				},
				{
					"label": {
						"zh_CN": "一星及以上",
						"en_US": "One star or above"
					},
					"value": "1"
				}
			],
			"default": "4"
		},
		{
			"type": "card_input",
			"label": {
				"zh_CN": "查看更多文案",
				"en_US": "Text of view more"
			},
			"id": "button_text"
		},
    {
      "type": "card_select",
      "label": {
        "zh_CN": "评论标题样式",
        "en_US": "Comment title style"
      },
      "default": "auto",
      "id": "comment_title_style",
      "option": [
        {
          "label": {
            "zh_CN": "完全显示",
            "en_US": "Full display"
          },
          "value": "auto"
        },
        {
          "label": {
            "zh_CN": "超过二行隐藏",
            "en_US": "More than two line hidden"
          },
          "value": "hide"
        }
      ]
    }
	],
	"blocks": [],
	"default": {
		"settings": {
			"title": "Style Gallery",
			"detail": "",
			"web_column": "3",
			"loadding": "2",
			"loadding_column": "2",
      "mobile_web_column": "2",
      "mobile_loadding": "1",
      "mobile_loadding_column": "1",
			"time": "desc",
			"level": "4",
			"is_width_fill": false,
			"button_text": "View More",
      "comment_title_style":"auto"
		},
		"blocks": []
	},
	"icon": "icon-shaitupinglun"
}
{% endschema %}